<template>
    <div class="container">
        <iSearch>
            <template #Button>
                <a-button type="primary" @click="initList">刷新</a-button>
                <a-button type="primary" danger v-iscan="['member:group:add']" @click="handleAdd">添加</a-button>
            </template>
        </iSearch>

        <iTable :pagination="false" :columns="columns" :tableData="tableData" :loading="loading">
            <template #operate="{ record }">
                <a-flex gap="small" horizontal v-if="record.id !== 1">
                    <a-button type="link" v-iscan="['member:group:edit']" @click="handleEdit(record.id)">编辑</a-button>
                    <iDelete :auth="['member:group:del','disabled']" @delete="handleDelete(record.id)"></iDelete>
                </a-flex>
            </template>
        </iTable>
        <a-drawer :title="(formState.id || 0) > 0 ? '编辑分组': '添加分组'" rootClassName="full-modal-drawer" width="40%" :open="EditVisible" @close="handleEditClose()" :loading="EditLoading">
            <a-form ref="formStateRef" :model="formState" autocomplete="off" :rules="formStateRule" layout="vertical">
                <a-form-item name="group_name" label="分组名称">
                    <a-input v-model:value="formState.group_name" placeholder="请输入分组名称"></a-input>
                </a-form-item>
            </a-form>
            <template #extra>
                <a-space>
                    <a-button @click="handleEditClose()">取消</a-button>
                    <a-button type="primary" @click="handleSubmit()">保存</a-button>
                </a-space>
            </template>
        </a-drawer>
    </div>
</template>


<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { iPb } from '@/protobuf/interface/index'
import { ListMemberGroup, ReadMemberGroup, CreateMemberGroup, UpdateMemberGroup, DeleteMemberGroup } from '@/api/member_group';
import { FormInstance } from 'ant-design-vue';
import type { TableColumnsType } from 'ant-design-vue';
import { Message } from '@/tool/antdv';
import { TableWidth } from '@/tool/enum';

const formStateRef = ref<FormInstance>()
const formState = ref<iPb.IDbMemberGroup>(iPb.DbMemberGroup.create())
const formStateRule = {
    group_name: [
        { required: true, message: '请输入分组名称' }
    ],
}

const loading = ref<Boolean>(false)
const EditVisible = ref<Boolean>(false)
const EditLoading = ref<Boolean>(false)
const tableData = ref<Array<iPb.IDbMemberGroup>>([])

const handleAdd = () => {
    formStateRef.value?.resetFields()
    formState.value = iPb.DbMemberGroup.create()
    EditVisible.value = true
}
const handleEditClose = () => {
    EditVisible.value = false
}

const handleDelete = (id: number) => {
    if(EditLoading.value) {
        return
    }
    EditLoading.value = true
    DeleteMemberGroup(iPb.Admin.DeleteMemberGroupRequest.create({
        id: id
    })).then((_result: iPb.Admin.IDeleteMemberGroupResponse) => {
        EditLoading.value = false
        Message.success({
            content: "删除成功",
        })
        initList()
    })
}


const handleEdit = (id: number) => {
    formStateRef.value?.resetFields()
    if(EditLoading.value) {
        return
    }
    EditLoading.value = true
    const ReadMemberGroupRequest = iPb.Admin.ReadMemberGroupRequest.create({
        id: id
    })
    ReadMemberGroup(ReadMemberGroupRequest).then((result:iPb.IDbMemberGroup) => {
        formState.value = iPb.DbMemberGroup.create(result)
        EditVisible.value = true
        EditLoading.value = false
    }).catch(() => {
        EditLoading.value = false
    })
}

const handleSubmit = () => {
    const formData = formState.value
    formStateRef.value?.validate().then(() => {
        if(EditLoading.value) {
            return
        }
        EditLoading.value = true
        if((formData.id || 0) > 0) {
            UpdateMemberGroup(formData).then((_result:iPb.Admin.IUpdateMemberGroupResponse) => {
                EditLoading.value = false
                EditVisible.value = false
                Message.success({
                    content: "保存成功",
                })
                initList()
            }).catch(() => {
                EditLoading.value = false
            })
        }else {
            CreateMemberGroup(formData).then((_result:iPb.Admin.ICreateMemberGroupResponse) => {
                EditLoading.value = false
                EditVisible.value = false
                Message.success({
                    content: "添加成功",
                })
                initList()
            }).catch(() => {
                EditLoading.value = false
            })
        }
    })
}

const initList = () => {
    if(loading.value) {
        return
    }
    loading.value = true
    ListMemberGroup(iPb.Admin.ListMemberGroupRequest.create()).then((result:iPb.Admin.IListMemberGroupResponse) => {
        let R = iPb.Admin.ListMemberGroupResponse.create(result)
        tableData.value = R.data
        loading.value = false
    })
}

const columns:TableColumnsType = [
    {
        title: "ID",
        dataIndex: "id",
        width: TableWidth.Id,
    },
    {
        title: "分组名称",
        dataIndex: "group_name",
        width: TableWidth.Ordinary,
    },
    {
        title: "操作",
        dataIndex: "operate",
        width: TableWidth.Operate,
    }
]

onMounted(() => {
    initList()
})


</script>


<style lang="less">
.third-layer {
    .ant-tree-list-holder-inner {
        display: inline-block !important;
    }
}
.last-layer {
    display: inline-flex !important;
}
</style>
